<template>
  <div>
    <div class="bg">
      <el-button type="primary" @click="handleAdd()">添&nbsp;加</el-button>
      <div class="table" v-loading="isLoading">
        <el-table
          :data="tableData.slice(0,pagesize)"
          border
          stripe
          style="width:85%;min-height:50.5vh"
        >
          <el-table-column prop="name" label="名称" width="300"></el-table-column>
          <el-table-column prop="index_name" label="所属指标"></el-table-column>
          <el-table-column label="操作" width="300">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.row.name, scope.row.index_name, scope.row.id)"
              >修改</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 下一页按钮 -->
        <div class="block">
          <el-pagination
            layout="prev, pager, next"
            :pageCount="pageCount"
            :pager-count="5"
            @current-change="current_change"
          ></el-pagination>
        </div>

        <!-- dialog对话框 -->
        <el-dialog :title="title" :visible.sync="dialogFormVisible" style="width:55%;margin:0 auto">
          <el-form :model="form">
            <el-form-item label="名称" :label-width="formLabelWidth">
              <el-input
                v-model="form.name"
                autocomplete="off"
                placeholder="请输入内容"
                style="width:250px"
              ></el-input>
            </el-form-item>
            <el-form-item label="指标" :label-width="formLabelWidth">
              <treeselect
                :options="options"
                placeholder="请输入内容"
                v-model="form.region"
                style="width:250px"
              />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="sureEdit(title,form.name,form.region,form.id)">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

  <script>
// import the component
import Treeselect from "../../../node_modules/@riophae/vue-treeselect";
// import the styles
import "../../../node_modules/@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  components: {
    Treeselect
  },
  data() {
    return {
      title: "", //对话框的标题
      pageCount: 0,
      pagesize: 6, //每个页面显示的数量
      currentPage: 1,
      dialogFormVisible: false, //若为false则对话框隐藏
      form: {
        id: "", //排行id
        name: "",
        region: ""
      },
      formLabelWidth: "80px",
      tableData: [],
      options: [],
      isLoading: true
    };
  },
  methods: {
    // 打开添加对话框
    handleAdd() {
      this.form.name = "";
      this.form.region = null;
      this.dialogFormVisible = true;
      this.title = "添加";
    },
    changeId(name) {
      for (let index = 0; index < this.options.length; index++) {
        if (name == this.options[index].label) {
          return this.options[index].id;
        }
        if (this.options[index].sonIndex.length != 0)
          this.options[index].children = this.options[index].sonIndex;
        for (
          let indexx = 0;
          indexx < this.options[index].sonIndex.length;
          indexx++
        ) {
          if (name == this.options[index].children[indexx].label) {
            return this.options[index].children[indexx].id;
          }
          if (this.options[index].children[indexx].sonIndex.length != 0) {
            this.options[index].children[indexx].children = this.options[
              index
            ].children[indexx].sonIndex;
            for (
              let x = 0;
              x < this.options[index].children[indexx].children.length;
              x++
            ) {
              if (
                name == this.options[index].children[indexx].children[x].label
              ) {
                return this.options[index].children[indexx].children[x].id;
              }
            }
          }
        }
      }
    },
    // 打开修改对话框
    handleEdit(index, row, rank_id) {
      let row_id;
      row_id = this.changeId(row);
      this.form.name = index;
      this.form.region = row_id;
      this.form.id = rank_id;
      this.dialogFormVisible = true;
      this.title = "修改";
    },
    // 点击对话框上确定按钮
    sureEdit(title, name, index_name, rank_id) {
      if (title === "修改") {
        this.updateInfo(name, index_name, rank_id);
      } else {
        this.addInfo(name, index_name);
      }
      this.dialogFormVisible = false;
    },
    // 打开删除对话框
    handleDelete(index) {
      let _this = this;
      _this.isLoading = true;

      this.$confirm("您确定要删除该条数据吗？", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
        center: true
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });

          var data = {
            id: index
          };
          var url = "/api/rank/delRank";
          _this.$axios("post", url, data, function(data) {
            _this.getInfo(_this.currentPage); //刷新页面
            console.log("SUCCESS");
            _this.isLoading = false;
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
          _this.isLoading = false;
        });
    },
    getInfo(pages) {
      let _this = this;
      // 获取每页要显示的内容
      _this.isLoading = true;
      this.$http({
        method: "get",
        url: "/api/rank/getRankByPage",
        params: {
          type: 0,
          page: pages,
          limit: 6
        }
      })
        .then(function(response) {
          console.log(response.data);
          if (response.data.code === 0) {
            _this.pageCount = response.data.data.pages;
            _this.tableData = response.data.data.result;
          } else {
            _this.message(true, response.data.message, "danger");
          }
          _this.isLoading = false;
        })
        .catch(function(error) {
          _this.message(true, error, "danger");
        });
    },
    // 获取所有指标
    getIndex() {
      let _this = this;
      // 获取每页要显示的内容
      _this.isLoading = true;
      this.$http({
        method: "get",
        url: "/api/index/getIndex",
        params: {
          type: 0
        }
      })
        .then(function(response) {
          console.log("获取所有指标");
          console.log(response.data);
          // 解析获取的数据。让其能显示
          if (response.data.code === 0) {
            _this.options = response.data.data;
            for (let index = 0; index < _this.options.length; index++) {
              _this.options[index].label = _this.options[index].name;
              if (_this.options[index].sonIndex.length != 0)
                _this.options[index].children = _this.options[index].sonIndex;
              for (
                let indexx = 0;
                indexx < _this.options[index].sonIndex.length;
                indexx++
              ) {
                _this.options[index].children[indexx].label =
                  _this.options[index].children[indexx].name;
                if (_this.options[index].children[indexx].sonIndex.length != 0)
                  _this.options[index].children[indexx].children =
                    _this.options[index].children[indexx].sonIndex;
                for (
                  let x = 0;
                  x < _this.options[index].sonIndex[indexx].sonIndex.length;
                  x++
                ) {
                  _this.options[index].children[indexx].children[x].label =
                    _this.options[index].children[indexx].children[x].name;
                  if (
                    _this.options[index].children[indexx].children[x].sonIndex
                      .length != 0
                  )
                    _this.options[index].children[indexx].children[x].children =
                      _this.options[index].children[indexx].children[
                        x
                      ].sonIndex;
                }
              }
            }
          } else {
            _this.message(true, response.data.message, "danger");
          }
          _this.isLoading = false;
        })
        .catch(function(error) {
          console.log(error);
          _this.isLoading = false;
        });
    },
    // 修改内容
    updateInfo(index, row, rank_id) {
      let _this = this;
      _this.isLoading = true;
      var data = {
        id: rank_id,
        name: index,
        indexId: row
      };
      var url = "/api/rank/editRank";
      _this.$axios("post", url, data, function(data) {
        _this.getInfo(_this.currentPage); //刷新页面
        console.log("SUCCESS");
        _this.isLoading = false;
      });
    },
    // 增加内容
    addInfo(index, row) {
      let _this = this;
      _this.isLoading = true;
      var data = {
        name: index,
        type: "0",
        indexId: row
      };
      var url = "/api/rank/addRank";
      _this.$axios("post", url, data, function(data) {
        _this.getInfo(_this.currentPage); //刷新页面
        console.log("SUCCESS");
        _this.isLoading = false;
      });
    },
    // 点击下一页的事件
    current_change(currentPage) {
      this.currentPage = currentPage;
      this.getInfo(currentPage);
    }
  },
  mounted() {
    let _this = this;
    _this.getInfo(1);
    _this.getIndex();
  }
};
</script>

  <style scoped>
.bg {
  height: 79vh;
  width: 81vw;
  padding: 2vh 4vw;
  background-color: #fff;
  margin: 6vh auto;
  font-size: 18px;
}
.table {
  width: 95%;
  margin: 20px auto;
}
</style>